<template>
    <view class="page">
        <view class="uni-padding-wrap uni-common-mt">
            <view class="button-sp-area">
                <span>根据时间查阀门操作记录：</span>
                <button class="mini-btn" type="primary" size="mini" @click="getOperationValveData">搜索</button>
            </view>
        </view>

        <view class="example-body">
            <uni-datetime-picker v-model="datetimerange" type="datetimerange" rangeSeparator="至" />
        </view>
    </view>
</template>

<script setup lang="ts">
import { ref, toRaw, watch, onMounted } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import { http } from '@/utils/http';
import type ValvesOperationRecord from '@/types/valvesOperationRecord';

const obtain = ref<ValvesOperationRecord[]>([]);
const emit = defineEmits(['queryDateAgain']);

const getOperationValveData = async () => {
    const res = await http<any>({
        url: '/valve/getOperationValveData',
        method: 'POST',
        data: datetimerange.value
    });
    //console.log(res.data);
    // obtain.value = res.data;

    // 使用 JSON.parse(JSON.stringify(...)) 深拷贝数据
    obtain.value = JSON.parse(JSON.stringify(res.data));
    console.log(toRaw(obtain.value));

    emit('queryDateAgain', toRaw(obtain.value));
}


// 获取今天的日期并格式化为 "YYYY-MM-DD HH:mm:ss"
const padZero = (num: number): string => num.toString().padStart(2, '0');
const getTodayRange = (): [string, string] => {
    const today = new Date();
    const year = today.getFullYear();
    const month = padZero(today.getMonth() + 1); // 注意月份从0开始计数
    const day = padZero(today.getDate());

    return [
        `${year}-${month}-${day} 00:00:00`,
        `${year}-${month}-${day} 23:59:59`
    ];
};

// 定义响应式数据
// const datetimerange = ref(["2021-03-20 20:10:10", "2021-05-10 10:10:10"]);
const datetimerange = ref<string[]>([]);

/* // 监听datetimerange的变化
watch(datetimerange, (newVal) => {
    console.log("范围选:", newVal);
}); */

//进入页面就执行
onShow(() => {
    // console.log("进入页面");
    datetimerange.value = getTodayRange();
});


// 方法定义
const change = (e: string) => {
    console.log("-change事件:", e);
};

</script>

<style>
.button-sp-area {
    display: flex;
    align-items: center;
    /* 垂直居中对齐 */
    justify-content: space-evenly;
    margin: 20rpx 25rpx;
}
</style>
